<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!--希望遍历data中一个对象的每个属性，反复生成多个相同结构的HTML元素-->
    <ul>
      <li v-for="(value,key) of goods" :key="key">{{key}} : {{value}}</li>
    </ul>
  </div>
  <script>
    Vue.createApp({
      data(){
				return{
					goods: {
					  id: 11,
					  name: "华为手机",
					  title: "2022新款 爆销售202220222022",
					  price: 12.78,
					}
				}
      },
    }).mount("#app");
  </script>
</body>

</html>